<template>
  <MyVanskeleton :row="3" :loading="loading">
    <template v-slot:my-content>
			
      <div class="companyInfo">
        <!-- <NavShareBar :title="company ? company.companyName : '企业信息'" :onShare="onShare" /> -->
				<van-nav-bar  title="企业详情" fixed left-arrow @click-left="$router.back()"  />
				<van-empty v-if="!company" description="该企业暂未填写相关信息"/>
        <div v-else  class="content-top">
          <!-- 基本信息 -->
          <div class="basic">
            <p>
              <b>{{ company.companyName }}</b>
	<em v-if="company.isRZ == 1">认证企业</em>
              <span>
                <van-icon name="apps-o" />{{ company.tradeIDValue }}
              </span>
              <span>
                <van-icon name="label-o" />{{ company.companyTypeValue }}
              </span>
              <span>
                <van-icon name="location-o" />{{ company.locationValue }}
              </span>
            </p>
            <p>
              <img :src="company.logoUrl" v-if="company.logoUrl != ''" />
              <img src="@/assets/img/firm_default_avatar.png" v-else />
            </p>
          </div>
          <!-- 标签页 -->
          <van-tabs offset-top="46px" animated swipeable sticky style="padding-bottom: 60px">
            <van-tab title="公司信息">
              <!-- 公司简介 -->
              <div class="box">
                <div class="title">
                  <b>公司简介</b>
                </div>
                <div class="about">
                  <div style="white-space:pre-wrap" v-html="company.companyContent" :class="{
                      'van-multi-ellipsis--l3': showCompanyContentAll == false,
                    }"></div>
                  <a @click="showCompanyContentAll = !showCompanyContentAll">
                    {{ showCompanyContentAll == false ? "展开" : "收回" }}
                    <van-icon :name=" showCompanyContentAll == false? 'arrow-down': 'arrow-up' " size="10" />
                  </a>
                </div>
              </div>

              <!-- 公司照片 -->
              <div class="box" v-if="company.vmbPhotos !=null && company.vmbPhotos.length > 0">
                <div class="title">
                  <b>公司照片</b>
                </div>
                <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white" height="300">
                  <van-swipe-item v-for="(item, index) in company.vmbPhotos" :key="index" @click="photoClick" style="text-align:center">
                    <van-image :src="item" width="80%" height="100%"/>
                  </van-swipe-item>
                </van-swipe>
              </div>

              <!-- 公司地址 -->
              <div class="box">
                <div class="title">
                  <b>公司地址</b>
                </div>
                <div class="map" id="map">
                  <div class="map-shade" @click="toMap"></div>
                </div>
                <div class="address">
                  {{ company.address }}
                </div>
              </div>
            </van-tab>
            <van-tab title="在招职位">
              <!-- 在招职位 -->
              <van-list class="job-online-list">
                <div class="job-online-item" v-for="(item, index) in jobs" :key="index" @click="onJobClick(item.stationID_Main)">
                  <p>
                    <span>{{ item.stationName }}</span>
                    <span>{{ item.salaryFormat }}</span>
                  </p>
                  <p>
                    <span>{{ item.workAddressValue2 }} | {{ item.edu_LevelValue }} | {{ item.workYearsValue }}</span>
                  </p>
                  <p v-if="item.welfaresTxtArr != null">
                    <span v-for="(item_wel, index_wel) in item.welfaresTxtArr.slice(0, 4)" :key="index_wel">{{ item_wel }}</span>
                    <span v-if="item.welfaresTxtArr.length > 4">...</span>
                  </p>
                </div>
              </van-list>
            </van-tab>
          </van-tabs>
          <!-- 和HR聊聊 -->
          <div class="chat">
            <p>
              <span>问HR，公司还有哪些好福利</span>
              <span>在线约聊 · 实时互动</span>
            </p>
            <van-button round color="#05A6F0" @click="onIM(companyid)">和HR聊聊</van-button>
          </div>
        </div>
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { NavBar,ImagePreview, Icon, Tab, Tabs, List, Button, Swipe, SwipeItem, Image as VanImage, Dialog, Toast, } from "vant";
import NavShareBar from "@/components/NavShareBar.vue";
import MyVanskeleton from "@/components/MyVanskeleton.vue";
import {mixin_person_toJobCompany, mixin_person_toIM, } from "@/mixin/mixins";
import { returnToPhoneWithData } from "@/util/phone";
import Global from "@/Global";
import Encrypt from '../../../util/encrypt'
import MyEmpty from '@/components/MyEmpty.vue';
export default {
  name: "CompanyInfo",
  components: {
    NavShareBar,
    MyVanskeleton,
    MyEmpty,
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [List.name]: List,
    [Button.name]: Button,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [VanImage.name]: VanImage,
		[NavBar.name]:NavBar
  },
  mixins: [mixin_person_toJobCompany, mixin_person_toIM],
  // 定义属性
  data() {
    return {
      title: "title",
      loading: true,
      companyid: "",
      company: {}, //企业信息主体
      showCompanyContentAll: false, //展开企业详情
      map: {},
      long: 0,
      lat: 0,
			jobs:[]
    };
  },
  mounted() {
    this.companyid = this.$route.query.companyid;
    this.getInfo();
		setTimeout(() => {
			this.getStationIngList();
		}, 500);
  },
  // 方法集合
  methods: {
    getInfo() {
      // console.log(Encrypt.AESencrypt(this.companyid));
      // return;
      this.$api.get('/CompanyInfo/GetInfoForPersonUI', { companyID: Encrypt.AESencrypt(this.companyid) }).then(res => {
        this.loading = false;
        if (res.success) {
          this.company = res.response;
          if (res.response.latitude != '' && res.response.longitude != '') { this.lat = res.response.latitude; this.long = res.response.longitude }
          this.createMap(res.response.companyName, res.response.address);
        }
        else { this.company = null }
      })
    },
		getStationIngList(){
			this.$api.get('/CompanyStation/GetStationIngListAtStationInfoUI', { companyIDEncrpty: Encrypt.AESencrypt(this.companyid) }).then(res => {
        if (res.success) {
          this.jobs = res.response;
        }
        else { Dialog.alert(res.msg).then(() => { this.$router.go(-1) }) }
      })
		},
    createMap(companyname, address) {
      // this.long = '';this.lat='';address ='';
      //db7f2276c0d48e706a0ea229bf69ae2d e38a64d5210c6ddf7dc2eb05c5aaee0b
      AMapLoader.load({
        key: "db7f2276c0d48e706a0ea229bf69ae2d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        if (this.long === 0 || this.lat === 0) {
          const Geocoder = new AMap.Geocoder({ city: "舟山" });
          Geocoder.getLocation(address, (status, result) => {
            if (status === "complete" && result.info === "OK") {
              // result中对应详细地理坐标信息
              this.long = result.geocodes[0].location.lng;
              this.lat = result.geocodes[0].location.lat;
              console.log(this.long, this.lat)
              this.map = new AMap.Map("map", {
                zoom: 15,
                center: [this.long, this.lat],
              });
              this.map.add(
                new AMap.Marker({
                  position: new AMap.LngLat(this.long, this.lat),
                  title: companyname,
                })
              );
            }
            else {
              console.log(result);
            }
          });
        } else {
          this.map = new AMap.Map("map", {
            zoom: 15,
            center: [this.long, this.lat],
          });
          this.map.add(new AMap.Marker({
            position: new AMap.LngLat(this.long, this.lat),
            title: companyname,
          })
          );
        }

        // this.map.setStatus({
        //   dragEnable: false,
        //   keyboardEnable: false,
        //   doubleClickZoom: false,
        //   zoomEnable: false,
        //   rotateEnable: false,
        // });

        //构建自定义信息窗体
        // address = address.replace('嘉兴市', '')
        // var infoWindow = new AMap.InfoWindow({
        //     anchor: 'bottom-center',
        //     content: `<span style='font-size:12px;'>${address}</span>`,
        //     offset: new AMap.Pixel(0, -40)
        // });
        // infoWindow.open(this.map, [long, lat]);
      })
        .catch((e) => {
          console.log(e);
        });
    },
    photoClick() {
      ImagePreview(this.company.vmbPhotos);
    },
    onShare() {
			if(!this.company)
				return;
      let title = `${this.company.companyName}正在招聘${this.jobs.length}个岗位！`;
      let content = `${this.company.locationValue} | ${this.company.tradeIDValue} | ${this.company.companyTypeValue}`;
      returnToPhoneWithData({
        action: "share",
        title,
        content,
        url:
          Global.share_person_url +
          `/Q/CompanyInfo.aspx?CompanyID=${this.companyid}`,
      });
    },
    toMap() {
      // this.$router.push({
      //   name: "person-companyinfo-map",
      //   query: { companyid: this.companyid },
      // });
    },
  },
};
</script>

<style scoped>
@import "./CompanyInfo.css";
</style>
